<template>
  <span id="community"></span>
</template>

<script setup>
import TypeIt from "typeit";
import {onMounted, watch} from "vue";


onMounted(() =>{
  new TypeIt('#community', {
    speed: 100,
    deleteSpeed: 150,
    loop: true,
    cursorChar: "⭐",
    cursor: {
      autoPause: false,
      animation: {
        options: {
          duration: 1000,
          easing: "linear",
          direction: "alternate",
        },
        frames: [
          {
            transformOrigin: "0.575em 0.7em",
            transform: "rotate(0deg) scale(1)",
          },
          {
            transformOrigin: "0.575em 0.7em",
            transform: "rotate(360deg) scale(2.5)",
          },
        ],
      },
    },
  })
      .type('还在进行开发中哦！', {delay: 2000})
      .delete(9, {delay: 1000})
      .type('请敬请期待!', {delay: 2000})
      .go();
})
</script>

<style scoped>
#community{
  position: absolute;
  font-size: 56px;
  margin-left: 30%;
  margin-top: 20%;
}
</style>
